//页面基本代码
window.onload = function(){
	document.getElementById("container").style.height = document.body.clientHeight - 100 + "px";
};
window.onresize = function(){
	window.location.reload();
};

function $(id){
	return document.getElementById(id);
}

var timer;
function setInfo(msg){
	$('info').innerHTML = "Info：" + msg;
	clearTimeout(timer);
	timer = setTimeout(function(){$('info').innerHTML = '';}, 3000);
}

//ExtJS相关代码
Ext.onReady(function(){
	var north = new Ext.Panel({
		renderTo: 'top',
		title: "Console——控制台",
		width: '100%',
		height: 100,
		html: '<div style="margin-top: 20px; margin-left: 50px; font-size: 18px;">Ext4.0练习<label id="info"></label></div>'
	});
	
	/*********************************************   Tree  Begin  ************************************************/
	var treeStore = Ext.create("Ext.data.TreeStore",{
		proxy : {
			type : "ajax",
			url : "BaseAction?method=getTreeData"
		},
		nodeParam : "id"	//设置传递给后台的参数名,值是树节点的id属性
	});
	var theTree = Ext.create("Ext.tree.Panel", {
		renderTo: 'left',
		width: '100%',
		height: '100%',
		title: "开发技术",
		rootVisible: true,	//显示根节点
		enableDD: true,
		store: treeStore,
		root: {
			id: 'root',
			text: '根节点',
			expanded: false,
			leaf: false,
			checked: false
		},
		listeners: {
					'itemclick': function(view,re){
						setInfo(re.data.id + "\t" + re.data.text);
					}
		},
		viewConfig: {
            onCheckboxChange : function(e, t){
                var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;
                if(item){
					record = this.getRecord(item);
					var check = !record.get('checked');
					record.set('checked', check);
					if(check){
						record.bubble(function(parentNode){
							//parentNode.set('checked', true);
						});
						record.cascadeBy(function(node){
							node.set('checked', true);
						});
					}else{
						record.cascadeBy(function(node){
							node.set('checked', false);
						});
					}
                }
            },
            loadingText : "加载数据..."
        }
	});
	/*********************************************   Tree  End  ************************************************/
	
	
	/*********************************************   Grid  Begin  ************************************************/
	var thePageSize = 3;
	var selModel = Ext.create('Ext.selection.CheckboxModel');
	//JSON数据源
	var employeeStore = Ext.create('Ext.data.Store',{
		pageSize: thePageSize,
		fields: ['id', 'name', 'phone', 'email'],
	    proxy: {
	    	type: 'ajax',
	    	url: 'BaseAction?method=getGridData',
	    	reader: {
	    		type: 'json',
	    		root: 'humresData',
	    		totalProperty: 'totalRecord'
	    	}
	    },
	    sorters: [{
            property: 'id',
            direction: 'DESC'
        }]
	});
	
	var columns = [
	        {text: 'ID', dataIndex: 'id'},
	        {text: '姓名', dataIndex: 'name',
	        	field:{
	                xtype:'textfield',
	                allowBlank:false
            	}
	        },
	        {text: '电话', dataIndex: 'phone',
	        	field:{
	                xtype:'textfield',
	                allowBlank:false
            	}
	        },
	        {text: '电邮', dataIndex: 'email',
	        	field:{
	                xtype:'textfield',
	                allowBlank:false
            	}
            }
	    ];
	//数据表格
	Ext.create('Ext.grid.Panel', {
		renderTo: 'right',
		height: '100%',
	    title: '员工信息',
	    selModel: selModel,
	    store: employeeStore,
	    viewConfig : {
			loadingText : "加载数据..."
		},
	    columns: columns,
	    tbar: [
	    	{
		    	xtype: 'button',
		    	id: 'detail_Btn',
				text: '详情',
				handler: function(btn,e){
					openWindow('detail_Btn');
				}
			},
			{
		    	xtype: 'button',
		    	id: 'new_Btn',
				text: '添加'
			},
			{
		    	xtype: 'button',
		    	id: 'update_Btn',
				text: '修改'
			},
			{
		    	xtype: 'button',
		    	id: 'delete_Btn',
				text: '删除',
				iconCls: 'icon-add'
			}
		],
	    dockedItems: [{
	        xtype: 'pagingtoolbar',
	        store: employeeStore,
	        dock: 'bottom',
	        displayInfo: true,
	        displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',
            emptyMsg: "没有记录！"
	    }],
	    selType: 'cellmodel',
	    plugins: [
	        Ext.create('Ext.grid.plugin.CellEditing', {
	            clicksToEdit: 2
        	})
    	]
	});
	employeeStore.load({params:{start: 0, limit: thePageSize}});
	/*********************************************   Grid  End  ************************************************/
	function openWindow(btnID){
		var win = Ext.create('Ext.window.Window', {
		    title: '员工详细信息',
		    height: 300,
		    width: 500,
		    modal: true,
		    layout: 'fit',
		    animateTarget: Ext.get('detail_Btn'),
		    items: {
		        xtype: 'form',
		        border: false,
				items: [{
			        xtype: 'textfield',
			        name: 'email',
			        fieldLabel: 'ID',
			        vtype: 'email'  // requires value to be a valid email address format
			    }, {
			        xtype: 'textfield',
			        name: 'name',
			        fieldLabel: '姓名',
			        allowBlank: false  // requires a non-empty value
			    }, {
			        xtype: 'textfield',
			        name: 'email',
			        fieldLabel: '电话',
			        vtype: 'email'  // requires value to be a valid email address format
			    }, {
			        xtype: 'textfield',
			        name: 'email',
			        fieldLabel: '电邮',
			        vtype: 'email'  // requires value to be a valid email address format
			    }, {
			        xtype: 'button',
            		text : '修改'
			    }, {
			        xtype: 'button',
            		text : '取消',
            		handler: function(btn,e){
						win.close();
					}
			    }]
		    }
		}).show();
	}
	
	
	
	

});